<template>
  <div>
    <search></search>
    <div class="lunbo">
      <van-swipe :autoplay="3000">
        <van-swipe-item><img src="../img/Buds3.jpg"></van-swipe-item>
        <van-swipe-item><img src="../img/sim.jpg"></van-swipe-item>
        <van-swipe-item><img src="../img/OPPO.jpg"></van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid
        :column-num="5"
        :border=false
      >
        <van-grid-item
          icon="fire"
          text="干货"
          style="color:rgb(255, 100, 98)"
        />
        <van-grid-item
          icon="comment"
          text="热闻"
          style="color:rgb(99, 208, 253)"
        />
        <van-grid-item
          icon="label"
          text="众测"
          style="color:rgb(197, 122, 250)"
        />
        <van-grid-item
          icon="friends"
          text="玩机大神"
          style="color:rgb(253, 154, 78)"
        />
        <van-grid-item
          icon="bag"
          text="官方评测"
          style="color:rgb(255, 118, 170)"
        />
      </van-grid>
    </div>
    <hr class="hr">
    <!-- 动态 -->
    <div style="background:#f5f5f5">
      <div
        class="tiezi"
        v-for="item in message"
        :key="item.id"
      >

        <van-skeleton
          title
          avatar
          :row="3"
          :loading="loading"
        >
          <!-- 用户 -->
          <van-row>
            <van-col span="3">
              <van-image
                round
                width="1.0rem"
                height="1.0rem"
                fit="contain"
                :src="'apis/kuan_api/photo/'+item.user_img"
                style="border:1px solid lightgray"
                @click="look(item.user_id)"
              />
            </van-col>
            <van-col span="19">
              <div @click="lookDetail(item.id)">
                <p class="username"><b>{{item.user_nickname?item.user_nickname:item .user_name}}</b></p>
                <p class="username shouji">
                  {{item.AddTime}}
                  <van-icon name="graphic" />小米12Pro
                </p>
                <p class="txt">{{item.message}}</p>
              </div>
              <div
                v-if="item.img!=null"
                class="box"
              >
                <van-image
                  :src="'apis/kuan_api/img/'+item.img"
                  fit="contain"
                  v-if="item.img.search('.mp4')==-1"
                  @click="LookImg(item.img)"
                />
                <video
                  width="320"
                  height="240"
                  controls
                  v-if="item.img.search('.mp4')!=-1"
                >
                  <source
                    :src="'apis/kuan_api/img/'+item.img"
                    type="video/mp4"
                  >
                </video>
              </div>
            </van-col>
            <!-- 下拉菜单 -->
            <van-col span="2">
              <van-button
                class="btn"
                @click="select(item.id,item.user_id,item.img)"
              >
                <van-icon name="arrow-down" />
              </van-button>
            </van-col>
          </van-row>
          <van-tag
            class="tag"
            @click="tomodule(item.Productid)"
          >
            <van-image
              width="0.6rem"
              height="0.6rem"
              :src="'apis/kuan_api/ProductImg/'+item.ProductImg"
            />
            {{item.ProductName}}
          </van-tag>

          <div>
            <van-row>
              <van-col span="8">
                <van-button class="mes_btn">
                  <van-icon name="good-job-o" />
                </van-button>
              </van-col>
              <van-col span="8">
                <van-button class="mes_btn">
                  <van-icon name="more-o" />
                </van-button>
              </van-col>
              <van-col span="8">
                <van-button class="mes_btn">
                  <van-icon name="share-o" />
                </van-button>
              </van-col>
            </van-row>
          </div>
        </van-skeleton>
      </div>
    </div>
    <!-- 非用户弹出层 -->
    <van-popup
      v-if="this.userid!=$store.state.user.user_id"
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- 头部小按钮 -->
      <p style="text-align:center;margin-top:3px">
        <van-button class="top_btn"></van-button>
      </p>
      <!-- 第一行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="star-o"
                class="first_btn"
              ></van-button>
              <p>收藏</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="eye-o"
                class="first_btn"
              ></van-button>
              <p>屏蔽</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="first_btn"
              ></van-button>
              <p>举报</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 第二行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="records"
                class="sec_btn"
              ></van-button>
              <p>动态</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="envelop-o"
                class="sec_btn"
              ></van-button>
              <p>私信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="wechat"
                class="thi_btn"
              ></van-button>
              <p>微信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>朋友圈</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>QQ</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 取消按钮 -->
      <van-button
        block
        style="background-color:#f5f5f5"
        @click="quxiao"
      >取消</van-button>
    </van-popup>
    <!-- 用户弹出层 -->
    <van-popup
      v-else
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- 头部小按钮 -->
      <p style="text-align:center;margin-top:3px">
        <van-button class="top_btn"></van-button>
      </p>
      <!-- 第一行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="back-top"
                class="first_btn"
              ></van-button>
              <p>置顶</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="star-o"
                class="first_btn"
              ></van-button>
              <p>收藏</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="edit"
                class="first_btn"
              ></van-button>
              <p>编辑</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="delete-o"
                class="first_btn"
                @click="deleteDongtai"
              ></van-button>
              <p>删除</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 第二行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="records"
                class="sec_btn"
              ></van-button>
              <p>动态</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="envelop-o"
                class="sec_btn"
              ></van-button>
              <p>私信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="wechat"
                class="thi_btn"
              ></van-button>
              <p>微信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>朋友圈</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>QQ</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 取消按钮 -->
      <van-button
        block
        style="background-color:#f5f5f5"
        @click="quxiao"
      >取消</van-button>
    </van-popup>
    <!-- 查看图片 -->
    <van-overlay
      :show="look_img"
      @click="look_img = false"
      :lock-scroll="true"
    >
      <div class="img_box">
        <van-image
          width="15rem"
          height="15rem"
          :src="'apis/kuan_api/img/'+this.imgurl"
          fit="contain"
        />
      </div>
    </van-overlay>

  </div>
</template>

<script>
import Search from "@/components/Search";
import Vue from "vue";
export default {
  components: { Search },
  name: "Home",
  data() {
    return {
      message: null,
      show: false,
      userid: "",
      messageid: "",
      imgname: "",
      loading: true,
      look_img: false,
      imgurl: "",
    };
  },
  methods: {
    // 获取动态
    getmessage() {
      this.axios
        .post("apis/kuan_api/index.php")
        .then((res) => {
          this.message = res.data.message;
          console.log(this.message);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 查看动态
    lookDetail(id) {
      sessionStorage.setItem("message_id", JSON.stringify(id));
      this.$router.push("/detail");
    },
    look(id) {
      this.$router.push({
        path: "/userdetail",
        query: {
          userid: id,
        },
      });
    },
    select(id, userid, img) {
      this.show = true;
      this.userid = userid;
      this.messageid = id;
      this.imgname = img;
    },
    quxiao() {
      this.show = false;
    },
    // 删除动态
    deleteDongtai() {
      this.axios
        .post("apis/kuan_api/DeleteDongTai.php", {
          id: this.messageid,
          img: this.imgname,
        })
        .then((res) => {
          console.log(res.data);
          this.show = false;
          this.$toast.success("删除成功");
          this.getmessage();
        });
      console.log(this.messageid);
      console.log(this.imgname);
    },
    tomodule(id) {
      this.$router.push({
        path: "/module",
        query: { productid: id },
      });
    },
    LookImg(img) {
      this.imgurl = img;
      this.look_img = true;
      console.log(img);
    },
  },
  created() {
    this.getmessage();
    setTimeout(() => {
      this.loading = false;
    }, 700);
  },
};
</script>

<style scoped>
.lunbo {
  width: 95%;
  margin: 0 auto;
  /* margin-top:55px; */
}
img {
  width: 100%;
  height: 150px;
}
.tiezi {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
}
.username {
  margin: 5px;
}
.shouji {
  color: gray;
}
.box {
  display: flex;
  flex-wrap: wrap;
}
.txt {
  font-size: 16px;
}
.box_img {
  width: 30%;
  margin: 3px;
  border: 1px solid lightgray;
}
.box {
  display: flex;
  flex-wrap: wrap;
}
.box img {
  width: 33%;
}
.hr {
  margin: 0;
  background-color: #f5f5f5;
  height: 10px;
  border: 0;
}
.btn {
  border: 0;
  height: 22px;
}
.van-overlay {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.top_btn {
  width: 30px;
  height: 5px;
  background-color: #e6e6e6;
}
.icon_box {
  width: 85%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.first_btn {
  font-size: 0.5rem;
  background-color: #f0f0f0;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.sec_btn {
  background-color: #00af5726;
  color: #00af57ff;
  font-size: 0.6rem;
  font-weight: bold;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.thi_btn {
  background-color: #00af5719;
  color: #00af57ff;
  font-size: 0.7rem;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.tag {
  height: 0.7rem;
  margin-top: 5px;
  background-color: lightgray;
  color: black;
}
.mes_btn {
  border: 0;
  width: 100%;
  font-size: 20px;
}
.img_box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>